import React, { Component } from 'react';
import "./App.css"
class App extends Component {
  state={
    msg:"🐂"
  }
  handleClick =(params) => {
    this.setState({
      msg:"🐖"
    })
  }
 
  // componentDidMount(){
  //   document.getElementById("outerbox").scrollTop = 200;
  // }
 getSnapshotBeforeUpdate(props,state,snapshot){
   return 300;
 }
   //组件更新完了调用生命周期
   componentDidUpdate(props,state,snapshot){
    document.getElementById("outerbox").scrollTop = snapshot;
   }
  render() {
    return (
      <div className="Outerbox" id="outerbox">
          <div className="innerBox">
            <h1>{this.state.msg}</h1>
            <button onClick={this.handleClick}>点击变🐖</button>
          </div>
      </div>
      
    );
  }
}

export default App;
